<template>
    <div>
        <el-dialog
            :visible.sync="dialogVisible"
            :width="width"
            :title="title"
            :modal-append-to-body="false"
            :close-on-click-modal="false"
            v-dialogDrag
            class="dialog-main"
            :modal='false'
            >
            <div>
                <el-form :model="ruleForm" :rules="rules" ref="formName" label-width="80px" class="demo-ruleForm" size="mini" slot="center">
                    <el-form-item label="APPID:" prop="appID"> 
                        <el-input v-model="ruleForm.appID" size="mini" :disabled="disableEdit"  ></el-input>
                    </el-form-item>
                    <el-form-item label="名称:" prop="name"> 
                        <el-input v-model="ruleForm.name" size="mini"></el-input>
                    </el-form-item>
                    <el-form-item label="用户:" prop="employeeList"> 
                        <el-tag
                            v-for="(tag,index) in ruleForm.employeeList"
                            :key="tag.name + tag.id"
                            closable
                            @close="handleClose(index,1)"
                            size="mini"
                            style="margin-right:5px"
                        >
                            {{tag.name}} 
                        </el-tag>
                        <el-button class="button-new-tag" size="mini" @click="openSelectDialog(ruleForm.employeeList,1)">+</el-button>
                    </el-form-item>
                    <el-form-item label="状态:" prop="status"> 
                       <el-select v-model="ruleForm.status"
                            size='mini'
                            placeholder="选择状态"      
                            >
                            <el-option v-for="item in statusList"
                                :key="item.label"
                                :label="item.name"
                                :value="item.label"
                                >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="successDing('formName')" size="mini" type="primary">确 定</el-button>
                <el-button @click="closeCommonDialog()" size="mini">取 消</el-button>
            </span>
        </el-dialog>
        <multipleSelePdialog ref="multipleSelePdialog" :multiple="true" @getSelectMulList="getSelectMulList"></multipleSelePdialog>
    </div>
</template>
<script>
import { saveAppUser,getAppUserById  } from '@/api/user.js'
import multipleSelePdialog from '@/components/messageSourceConfig/multipleSelePdialog'
import { trim } from '@/utils/tools.js';
export default {
    name:'addOpenApiDialog',
    components:{
        multipleSelePdialog,
    },
    data(){
        return {
            statusList:[
                {
                    name:'正常',
                    label:1,
                },
                {
                    name:'禁止',
                    label:2,
                },
            ],
            title:'新增/编辑openapi用户定义',
            dialogVisible: false,
            disableEdit: false,
            ruleForm:{},
            rules:{
                appID: [
                    { required: true, message: this.M2('请填写appID！'), trigger: 'blur' },
                ],
                name: [
                    { required: true, message: this.M2('请填写名称！'), trigger: 'blur' },
                ],
                status: [
                    { required: true, message: this.M2('请选择状态！'), trigger: 'blur' },
                ],
                requsetLimit: [
                    {
                        required: true,
                        validator: (rules, value, cb) => {
                            if (!Number.isInteger(value) || value < 0) {
                                return cb(new Error(this.M2("请输入大于或等于0的正整数!")));
                            }
                            return cb();
                        },
                        trigger: "blur"
                    }
                ],
            },
        }
    },
    props:{
        titleText:{
            type:String,
            default:() => ('')
        },
        width:{
            type:String,
            default:() => ('40%')
        },
    },
     computed:{
    },
    methods:{
        openSelectDialog(name,id){
            this.$refs.multipleSelePdialog.openCommonDialog(name,id)
        },
         handleClose(index,type){
            if(type == 1){
                this.ruleForm.employeeList.splice(index,1)
            }
        },
        getSelectMulList(tagsList,val){
            if(val == 1){
                this.$set(this.ruleForm,'employeeList',tagsList)
            }
        },
        changeID(val){
            if(!val) return
            let param = {
                id:trim(val),
            }
            getAppUserById(param).then(res => {
                if(res.data){
                    this.$confirm((`已有数据是否要修改？`), { 
                        confirmButtonText: this.M2('确定'),
                        cancelButtonText: this.M2('取消'),
                        type: 'warning'
                    }).then(() => {
                        this.$set(this.ruleForm,'appID',res.data.appID)
                        this.$set(this.ruleForm,'name',res.data.name)
                        this.$set(this.ruleForm,'employeeId',res.data.employeeId)
                        this.$set(this.ruleForm,'id',res.data.id)
                        this.$set(this.ruleForm,'employeeList',[{name:res.data.name,id:res.data.id}])
                        this.$set(this.ruleForm,'status',res.data.status)
                    }).catch(() => {
                        this.$set(this.ruleForm,'appID',null)
                        return
                    })
                }
            }).catch(()=> {
                this.$set(this.ruleForm,'appID',null)
            })
        },
        successDing(formName){
            this.$refs[formName].validate((valid) => {
            if (valid) {
                let param = {
                    appID:trim(this.ruleForm.appID),
                    name:this.ruleForm.name,
                    employeeId:this.ruleForm.employeeList && this.ruleForm.employeeList.length > 0 ? this.ruleForm.employeeList[0].id : null,
                    employeeName:this.ruleForm.employeeList && this.ruleForm.employeeList.length > 0 ? this.ruleForm.employeeList[0].name : null,
                    status:this.ruleForm.status,
                    id:this.ruleForm.id ? this.ruleForm.id : null,
                }
                saveAppUser(param).then(res => {
                    if(res.code == 200){
                        this.closeCommonDialog()
                        this.$message({
                            showClose: true,
                            message:'操作成功！',
                            offset:220,
                            duration: 2000,
                            type: 'success'
                        })
                        this.$emit('mainListList')
                    }
                })
            } else {
                return false;
            }
        });
        },
        openCommonDialog(row){
            this.disableEdit = false
             this.$set(this.ruleForm,'employeeList',[])
            if(row){
                this.ruleForm = {
                    appID:row.appID,
                    name:row.name,
                    id:row.id,
                    employeeId:row.employeeId,
                    status:row.status,
                    employeeList:[
                        {
                            name:row.employeeName,
                            id:row.employeeId 
                        }
                    ]
                }
                this.disableEdit = true 
            }else {
                this.$set(this.ruleForm,'appID',null)
                this.$set(this.ruleForm,'name',null)
                this.$set(this.ruleForm,'employeeId',null)
                this.$set(this.ruleForm,'employeeName',null)
                this.$set(this.ruleForm,'employeeList',[])
                this.$set(this.ruleForm,'status',null)
                this.$set(this.ruleForm,'id',null)
            }
            this.dialogVisible = true
        },
        closeCommonDialog(){
            this.$refs.formName.clearValidate()
            this.dialogVisible = false
        }
    }
}
</script>
<style scoped lang="scss">
::v-deep.dialog-main{
    .el-dialog__header{
        border-bottom: 1px solid #ccc;
        padding: 10px !important;
        .el-dialog__title{
            font-weight: bold;
        }
    }
    .el-dialog__body{
        padding: 10px 20px 20px !important;
        overflow-y: auto;
        .button-new-tag {
            padding: 4px 10px;
        }
    }
    
}
</style>